<template>
  <view class="integral">
<!-- 		<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" right-text="筛选"
		 title="钱包明细"></uni-nav-bar> -->
    
    <view class="poup">
      <uni-popup :show="show" :type="popType" v-on:hidePopup="hidePopup">
        <view class="item" v-for="(item,index) in types" :key='index' @click="changeType(item,index)">
					<view :class='{orange:item.active}'>{{item.text}}</view>
				</view>
      </uni-popup>
    </view>
    <view class="main">
      <!--<view class="dateTitle">{{dateTitle}}</view>-->
      <!--无数据情况-->
      <view class="nodata" v-if="nodata">暂无数据...</view>
			
<!-- 			<view class="uni-list">
				<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
					<view class="uni-list-cell-navigate uni-navigate-right">
						{{item.value}}
					</view>
				</view>
			</view> -->

      <view v-if="list.length>0" class="list">

						<view class="item" :class="{'marginBottom':index===list.length-1}" v-for="(item,index) in list" :key="index">
						 
									<view class="colunm1">
											<view class="date">{{item.date}}</view>
											<view class="time">{{item.time}}</view>
									</view>
							
									<view class="colunm2">
												<view class="row1">
														<view  :class="{income:item.offset>0,expenditure:item.offset<0}">
															<text v-if='item.offset>0' >+</text>
															<text class="money">{{item.offset}}</text>
														</view>
														<!-- <view class="status" :class="{'red':getRed(item),'gray':getGray(item)}"> -->
														<view class="status">
															{{item.flowStatus.text}}
														</view>
													
												</view>
												
												<view class="description">{{item.detail}}</view>
									</view>
									
						</view>
						<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
						<view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view>
						
      </view>
			
			
    </view>
  </view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
import uniPopup from '../../../components/uni-popup.vue';
import uniNavBar from '../../../components/uni-nav-bar.vue';
export default {
    name: 'allMenu',
    data() {
        return {
            title: '全部账单',
            loadingText: '',
            content: '暂无数据...',
            loadingClass: 'icon-jiazaizhong',
            popType: 'top',
            types: [
                {
                    value: 0,
                    text: '全部',
                    active: true
                },
                {
                    value: 1,
                    text: '钱包充值',
                    active: false
                },
                {
                    value: 2,
                    text: '提现',
                    active: false
                },
                {
                    value: 3,
                    text: '项目购买',
                    active: false
                },
                {
                    value: 4,
                    text: '项目收益',
                    active: false
                }
            ],
            show: false,
            orange: false,
            dateTitle: '2018年08月',
            list: [],
            loading: false,
            finished: false,
            loadMoreText: '加载中...',
            showLoadMore: false,
            nodata: false,
            params: {
                startTime: '',
                endTime: '',
                operateType: '',
                wealthType: 'score',
                start: 0,
                limit: 10,
                token: util.getUserToken()
            }
        };
    },
    components: {
        uniNavBar,
        uniIcon,
        uniPopup
    },
    onNavigationBarButtonTap(e) {
        console.log(e);
        this.show = !this.show;
    },
    onPullDownRefresh() {
        this.params.start = 0;
        this.getList();
        this.finished = false;
    },

    onReachBottom() {
        console.log('onReachBottom');
        if (!this.finished) {
            this.showLoadMore = true;
            setTimeout(() => {
                this.params.start += this.params.limit;
                this.getList();
            }, 300);
        }
    },
    methods: {
        //统一的关闭popup方法
        hidePopup: function() {
            this.show = false;
        },
        back() {
            uni.navigateBack({
                delta: 1
            });
        },
        showMenu() {
            this.show = true;
        },
        onSelect() {
            this.show = true;
        },
        getStatus(item) {
            if (item.flowStatus) {
                return item.flowStatus.text;
            }
        },
        getRed(item) {
            if (item.flowStatus) {
                return item.flowStatus.text === '已过期';
            }
        },
        getGray(item) {
            if (item.flowStatus) {
                return item.flowStatus.text === '失败';
            }
        },
        formatMoney(money) {
            let num = util.showDecimal(money);
            return Math.abs(num);
        },
        formatDate(timeStamp) {
            // console.log(timeStamp);
            // return util.timestampToFormatString(timeStamp, 'MM/dd');
        },
        formatTime(timeStamp) {
            // return util.timestampToFormatString(timeStamp, 'hh:mm');
        },
        changeType(item, index) {
            for (let i = 0; i < this.types.length; i++) {
                if (i === index) {
                    this.types[i].active = true;
                } else {
                    this.types[i].active = false;
                }
            }

            switch (index) {
                case 0:
                    this.params.operateType = '';
                    uni.setNavigationBarTitle({
                        title: '全部'
                    });
                    // this.content = '您还没有抢到红包';
                    break;
                case 1:
                    // 提现
                    this.params.operateType = 'recharge';
                    // this.content = '暂无数据...';
                    uni.setNavigationBarTitle({
                        title: '钱包充值'
                    });

                    break;
                case 2:
                    // 问答红包
                    this.params.operateType = 'withdraw';
                    uni.setNavigationBarTitle({
                        title: '提现'
                    });
                    break;
                case 3:
                    // 到店红包
                    this.params.operateType = 'movieBuy';
                    // this.content = '您还没有抢到到店红包';
                    uni.setNavigationBarTitle({
                        title: '项目购买'
                    });

                    break;
                case 4:
                    // 好友红包奖励
                    this.params.operateType = 'profit';
                    // this.content = '暂无数据...';
                    uni.setNavigationBarTitle({
                        title: '项目收益'
                    });
            }
            this.list = [];
            this.params.start = 0;
            this.getList();
            this.show = false;
        },

        getList() {
//             uni.showLoading({
//                 title: '正在加载...'
//             });
            this.loading = true;

            util.ajax(
                'userWealthFlows',
                this.params,
                data => {
                    // uni.hideLoading();
                    uni.stopPullDownRefresh();
                    let json = data.data;
                    if (json.status) {
                        if (this.params.start == 0) this.list = [];
                        console.log(json.data);
                        for (let i = 0; i < json.data.length; i++) {
                            json.data[i].date = util.timestampToFormatString(
                                json.data[i].createTime,
                                'MM/dd'
                            );
                            json.data[i].time = util.timestampToFormatString(
                                json.data[i].createTime,
                                'hh:mm'
                            );
                            this.list.push(json.data[i]);
                        }

                        if (this.list.length === 0) {
                            this.nodata = true; //无数据
                        } else {
                            this.nodata = false;
                        }
                        // 加载状态结束
                        this.loading = false;
                        if (json.data.length < this.params.limit) {
                            this.finished = true;
                            this.showLoadMore = false;
                        }
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    onLoad() {
        this.getList();
    }
};
</script>

<style lang="less" scoped>
.loadfinished {
    padding: 15upx 0;
    color: #cccccc;
    // background: #fafafa;
}
.uni-navbar-container {
    justify-content: center;
}
.uni-loadmore {
    justify-content: center;
    align-items: center;
}
	/*通用 */
	view {
		font-size: 28upx;
		line-height: 1.8;
	}
.integral {
    // background: #fff;
    position: relative;
    z-index: 0;
    flex: 1;
    flex-direction: column;
    width: 100%;
    .poup {
        position: relative;
        .uni-popup-top {
            // top: 50upx;
            z-index: 1;
            .item {
                // border: 1px solid red;
                box-sizing: border-box;
                justify-content: center;
                align-items: center;
                width: 33.333%;
                height: 85upx;
                color: #666666;
                view {
                    font-size: 26upx;
                    // padding-bottom: 10upx;
                    font-weight: normal;
                }
            }
            .item:first-child,
            .item:nth-child(2),
            .item:nth-child(3) {
                padding-top: 30upx;
            }
            .item:last-child,
            .item:nth-child(4),
            .item:nth-child(5) {
                padding-top: 15upx;
            }
            .orange {
                color: #ff1268;
                border-bottom: 2upx solid #ff1268;
            }
        }
    }
    .main {
        box-sizing: border-box;
        
        .dateTitle {
            font-size: 18upx;
            color: #ccc;
            text-align: left;
            margin-bottom: 25upx;
        }
				.nodata{
					width: 100%;
					font-size: 28upx;
					color: #cccccc;
					margin-top: 60%;
					justify-content: center;
					display: flex;
				}

        .list {
            /*border: 1upx solid red;*/
						background: #fff;
            width: 100%;
            padding: 80upx 30upx 25upx;
            flex-direction: column;
            .item {
                width: 100%;
                display: flex;
                margin-bottom: 28upx;
                align-items: center;

                .colunm1 {
                    width: 30%;
                    text-align: right;
                    margin-right: 20upx;
                    flex-direction: column;
                    align-items: center;

                    .date {
                        font-size: 22upx;
                        color: #ccc;
                    }
                    .time {
                        font-size: 18upx;
                        color: #ccc;
                        margin-top: 6upx;
                    }
                }

                .colunm2 {
                    width: 70%;
                    /*border: 1upx solid red;*/
                    display: flex;
                    flex-direction: column;
                    /*justify-content: space-between;*/
                    text-align: left;
                    width: 100%;
                    .row1 {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        view:first-child {
                            align-items: center;
                        }
                        .expenditure {
                            color: #3e8fe3;
                        }

                        .money {
                            font-size: 36upx;
                            margin-right: 3upx;
                            margin-left: 2upx;
                        }

                        .status {
                            font-size: 26upx;
                            color: #ff8200;
                        }
                        .red {
                            color: #ff0000;
                        }
                        .gray {
                            color: #999;
                        }
                    }
                    .description {
                        font-size: 26upx;
                        color: #333333;
                        margin-top: 8upx;
                    }
                }
            }
            .marginBottom {
                margin-bottom: 0;
            }
        }
    }
}
</style>
